<template>
    <div style="background: #eff3f5;padding-top: 59px;">
        <header>
            <img src="../assets/images/common.png" alt="" class="headpic">
        </header>
        <div class="main clearfix">
            <el-row>
                <!-- 菜单 -->
                <el-col :span="6">
                    <div class="tabBox">
                        <p v-for="(item,index) in listData" :key="index" :class="['menutab',active == index ? 'isactive':'']" @click="changeFun(index,item.id)">{{item.name}}</p>
                    </div>
                </el-col>
                <!-- 内容 -->
                <el-col :span="18">
                    <div class="panel" style="margin: 0 0px 0px 24px;">
                        <div class="panel-main">
                            <h1 class="panel__title">{{nowtit}}</h1>
                            <div class="panel__content">
                                <el-collapse accordion>
                                    <el-collapse-item v-for="(item,index) in details" :key="index">
                                        <template slot="title">
                                            <img class="collapse-header-img" src="../assets/images/collapseheader.png" alt="" />
                                            <span class="collapse-header-text">{{item.title}}</span>
                                        </template>
                                        <div class="collapse-content" v-html="item.content"></div>
                                        <div></div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                            <div class="panel__footer">
                                <h4 class="contact__title">问题未解决？没有您想找的问题？ 别担心，我们为您准备了以下三种方式：</h4>
                                <div class="contact__item">
                                    <el-row :gutter="10">
                                        <!-- <el-col :span="8">
                                            <div class="grid-content item-border-right text-center">
                                                <img src="../assets/images/kefu.png" alt="" class="question-item-icon"/>
                                                <p class="question-item-text">在线客服，为您服务</p>
                                                <el-button class="kefu-btn">呼叫客服</el-button>
                                            </div>
                                        </el-col> -->
                                        <el-col :span="12">
                                            <div class="grid-content item-border-right text-center">
                                                <h2 class="hotline-number-text">{{kefuinfo.s_phone}}</h2>
                                                <p class="question-item-text">在线客服，为您服务</p>
                                                <p class="explain-text"><span class="color-red">推荐，</span>沟通及时、高效</p>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="grid-content text-center">
                                                <img src="../assets/images/kefu.png" alt="" class="question-item-icon"/>
                                                <p class="question-item-text">意见反馈，直达产品</p>
                                                <router-link to="/userfeedback">
                                                    <el-button class="kefu-btn">提交反馈</el-button>
                                                </router-link>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>

    import '../assets/css/help.css'
    export default {
        data(){
            return{
                routerAlive: true,  //渲染状态
                active: 0,
                listData: [],
                details: [],
                nowtit: '',  //当前标题
                kefuinfo: {},  //客服信息
            }
        },
        methods: {
            // 切换菜单选项
            handselect(){
                this.routerAlive = false;
                this.$nextTick(()=>{
                    this.routerAlive = true;
                });
            },
            init(){
                var _this = this;

                //tab列表
                this.$httpGet('/api/index/Article/getArticleType',{'type': 1}).then(response => {

                    if(response.code == 200){

                        _this.listData = response.msg;
                        _this.nowtit = _this.listData[0].name;
                        _this.changeFun(0,_this.listData[0].id);
                        
                    }

                });

                //客服信息
                this.$httpGet('/api/index/System/getSystemInfo').then(response => {

                    if(response.code == 200){

                        _this.kefuinfo = response.msg;
                        
                    }

                });
            },
            //切换tab
            changeFun(ind,cid){
                this.active = ind;

                var _this = this;

                _this.nowtit = _this.listData[ind].name;

                //tab列表
                this.$httpGet('/api/index/Article/getArticleInfoById',{'cid':cid}).then(response => {

                    if(response.code == 200){

                        _this.details = response.msg;
                        
                    }

                });
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style scoped>
    
</style>


